import React from 'react'
import Css from './style/commom.module.css'
import Myx from './img/myx.jpg'
import Dianzan from './img/点赞.png'
import Pinglun from './img/评论.png'
import More from './img/更多.png'
import Shinping from './img/视频播放a.png'
import Sanjiao from './img/播放 三角形.png'
import Playing from './img/正在播放.png'

class Demo extends React.Component{
    constructor(){
        super()
        this.state={
          arr:[],
          show:true,
        }
      }
    componentDidMount(){
        fetch('http://106.12.79.128:666/video/group?id=222138'
        ,{
            credentials:'include'
        })
        .then(body=>body.json())
        .then(res=>{
            this.setState({
              arr:res.datas
            })
            // console.log(this.state.arr)
        })
    }
    Appendzero (obj) {
        if (obj < 10) return "0" + obj; else return obj;
    }
    render(){
        return(
            <div>
                {this.state.arr.map((item,index)=>{
                return(
                    <div>
                    <div key={index} className={Css.div}>

                        {/* <img src={Shinping} alt="" className={Css.divvideo}/> */}
                        <img src={Sanjiao} alt="" className={Css.divsanjiao}/>
                        <img src={Playing} alt="" className={Css.divplaying}/>
                        <p  className={Css.divplaytime}>{`${this.Appendzero(parseInt(item.data.durationms/1000/60%60))}:${this.Appendzero(parseInt(item.data.durationms/1000%60))}`}</p>

                        {/* <img src={item.data.coverUrl} alt="" className={this.state.show?Css.myxImg:Css.hiddenmyxImg}/> */}
                        <video className={Css.myxVideo} src={item.data.urlInfo.url} 
                                controls poster={item.data.coverUrl}>
                        </video>


                        <p  className={Css.myxP}>{item.data.title}</p>
                        <div className={Css.myxuser}>
                            <img src={Myx} alt="" className={Css.myxusertouxiang}/>
                            <p className={Css.myxusername}>{item.data.creator.nickname}</p>
                            <div className={Css.myxusersmore}>
                                <img src={Dianzan} alt="" className={Css.myxuserdianzan}/>
                                <img src={Pinglun} alt="" className={Css.myxuserpinglun}/>
                                <img src={More} alt="" className={Css.myxusermore}/>
                            </div>
                        </div>
                    </div>
                    <div className={Css.myxgrey}></div>
                    </div>
                )
                })
                }
            </div>
        )
    }
}

export default Demo